import SingleUpload from '../../../common/singleUpload'
import '../../../../../style/less/formStyle.less'
import React from 'react'
import { Form, Input, Button,Icon,InputNumber } from 'antd';
import {inject, observer} from "mobx-react/index";
const FormItem = Form.Item;
import Tip from "../../../common/tip"
@inject("store")
@observer
class CorporationInfor extends React.Component {
    state = {
        confirmDirty: false,
    };
    componentDidMount() {
        // To disabled submit button at the beginning.
        this.props.store.actions.getStatus()
        this.props.form.validateFields();
    }
    handleSubmit = (e) => {
        e.preventDefault();
        this.props.form.validateFieldsAndScroll((err, values) => {
            if (!err) {
                this.props.toggle(true)
                this.props.store.actions.launchCorporationInfo(values,this.props.toggle)
            }
        });
    }
    handleConfirmBlur = (e) => {
        const value = e.target.value;
        this.setState({ confirmDirty: this.state.confirmDirty || !!value });
    }
    hasErrors = (fieldsError) => {
        return Object.keys(fieldsError).some(field => fieldsError[field]);
    }
    getKey = (key)=>{
        this.props.store.corporationInfo.licensePath=key
    }
    render() {
        const { getFieldDecorator, getFieldsError, getFieldError, isFieldTouched} = this.props.form;
        const formItemLayout = {
            labelCol: {
                sm: { span: 4 },
            },
            wrapperCol: {
                sm: { span: 16 },
            },
        };
        const tailFormItemLayout = {
            wrapperCol: {
                sm: {
                    span: 4,
                    offset: 4,
                },
            },
        };
        const nameError =  isFieldTouched('companyName') &&getFieldError('companyName');
        const contactError = isFieldTouched('contactName') &&getFieldError('contactName');
        const addressError =  isFieldTouched('companyAddress') &&getFieldError('companyAddress');
        const phoneError =  isFieldTouched('contactPhone') &&getFieldError('contactPhone');
        const emailError =  isFieldTouched('companyEmail') &&getFieldError('companyEmail');
        const store=this.props.store
        return (
            <div>
                <Tip title="企业认证"/>
                {store.validateStatus==="1"?
                <div className="check-div">
                    <Icon className="check-icon" type="hourglass"/>
                    <span className="check-span">审核中</span>
                </div>:(
                <div>
                    {store.validateStatus === "2" ?
                        <div>
                            <div style={{position:"relative",verticalAlign:"middle"}}>
                            <span className="certifi-front">公司名称</span>
                            <span className="certifi-back">{store.corporationInfo.companyName}</span>
                            </div>
                            <div style={{position:"relative",verticalAlign:"middle"}}>
                            <span className="certifi-front">地址</span>
                            <span className="certifi-back">{store.corporationInfo.companyAddress}</span>
                            </div>
                            <div style={{position:"relative",verticalAlign:"middle"}}>
                            <span className="certifi-front">联系人</span>
                            <span className="certifi-back">{store.corporationInfo.contactName}</span>
                            </div>
                            <div style={{position:"relative",verticalAlign:"middle"}}>
                            <span className="certifi-front">联系电话</span>
                            <span className="certifi-back">{store.corporationInfo.contactPhone}</span>
                            </div>
                            <div style={{position:"relative",verticalAlign:"middle"}}>
                            <span className="certifi-front">邮箱</span>
                            <span className="certifi-back">{store.corporationInfo.companyEmail}</span>
                            </div>
                            <div style={{position:"relative",verticalAlign:"middle",marginBottom:"10px"}}>
                            <span className="certifi-front">营业执照</span>
                            <span className="certifi-back"><img className="certifi-img" src={store.corporationInfo.finalLiccensePath}/></span>
                            </div>
                            <div style={{position:"relative",verticalAlign:"middle",display:"none"}}>
                                <span className="certifi-back"><Button type="primary" onClick={()=>store.validateStatus="3"}>修改信息</Button></span>
                            </div>
                        </div>:(
                        <div>{(store.validateStatus==="0"||(store.corporationInfo.companyName!=undefined&&store.validateStatus==="3")||(store.corporationInfo.companyName!=undefined&&store.validateStatus==="4"))?
                            <Form onSubmit={this.handleSubmit}>
                                {store.validateStatus==="4"?<div>{store.corporationInfo.refuseReason}</div>:""}
                                <FormItem
                                    {...formItemLayout}
                                    label="公司名称"
                                    validateStatus={nameError ? 'error' : ''}
                                    help={nameError || ""}
                                >
                                    {getFieldDecorator('companyName', {
                                        initialValue:store.corporationInfo.companyName,
                                        rules: [{required: true, message: '请输入公司名称!'}],
                                    })(
                                        <Input onBlur={this.handleConfirmBlur}/>
                                    )}
                                </FormItem>
                                <FormItem
                                    {...formItemLayout}
                                    label="地址"
                                    validateStatus={addressError ? 'error' : ''}
                                    help={addressError || ""}
                                >
                                    {getFieldDecorator('companyAddress', {
                                        initialValue:store.corporationInfo.companyAddress,
                                        rules: [{required: true, message: '请输入地址!'}],
                                    })(
                                        <Input onBlur={this.handleConfirmBlur}/>
                                    )}
                                </FormItem>
                                <FormItem
                                    {...formItemLayout}
                                    label="联系人"
                                    validateStatus={contactError ? 'error' : ''}
                                    help={contactError || ""}
                                >
                                    {getFieldDecorator('contactName', {
                                        initialValue:store.corporationInfo.contactName,
                                        rules: [{required: true, message: '请输入联系人!'}],
                                    })(
                                        <Input onBlur={this.handleConfirmBlur}/>
                                    )}
                                </FormItem>
                                <FormItem
                                    {...formItemLayout}
                                    label="联系人电话"
                                    validateStatus={phoneError ? 'error' : ''}
                                    help={phoneError || ""}
                                >
                                    {getFieldDecorator('contactPhone', {
                                        initialValue:store.corporationInfo.contactPhone,
                                        rules: [{required: true, message: '请输入联系人电话!'}],
                                    })(
                                        <Input onBlur={this.handleConfirmBlur}/>
                                    )}
                                </FormItem>
                                <FormItem
                                    {...formItemLayout}
                                    label="邮箱"
                                    validateStatus={emailError ? 'error' : ''}
                                    help={emailError || ""}
                                >
                                    {getFieldDecorator('companyEmail', {
                                        initialValue:store.corporationInfo.companyEmail,
                                        rules: [{
                                            type: 'email', message: '这不是一个邮箱!',
                                        }, {required: true, message: '请输入邮箱!'}],
                                    })(
                                        <Input onBlur={this.handleConfirmBlur}/>
                                    )}
                                </FormItem>
                                <SingleUpload getKey={this.getKey} finalPath={store.corporationInfo.finalLiccensePath} alt={"营业执照:"}/>
                                <FormItem {...tailFormItemLayout}>
                                    <Button type="primary" htmlType="submit"
                                            disabled={this.hasErrors(getFieldsError()) || store.corporationInfo.licensePath === undefined}>{store.validateStatus==="0"?"立即认证":"提交修改"}</Button>
                                </FormItem>
                            </Form>:""}
                        </div>)
                    }
                </div>)
                }
            </div>
        );
    }
}
const CorporationInfo = Form.create()(CorporationInfor);
export default CorporationInfo